<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn1">连接按钮</button>
  <button id="btn2">发送消息</button>
  <button id="btn3">断开消息</button>
  <script>
    const btn1 = document.querySelector('#btn1')
    const btn2 = document.querySelector('#btn2')
    const btn3 = document.querySelector('#btn3')
    let ws 
    // 点击按钮的时候和服务器建立连接
    btn1.addEventListener('click', () => {
       // 创建websocket实例
       ws = new WebSocket('ws://121.40.165.18:8800')
       // 监听连接.onopen
       ws.onopen = ()=> {
        console.log('建立连接成功')
       }

       // 客户端接收服务器发送的消息 
      ws.onmessage = (e) => {
        console.log(e.data)
      }
      // 监听关闭
      ws.onclose = () => {
        console.log('聊天服务结束关闭')
      }
    })
    // 客户端向服务端发送消息 .send
    btn2.addEventListener('click', () => {
      ws.send('hello')
    })
    // 关闭连接
    btn3.addEventListener('click', () => {
      ws.close()
    })
    


// 下载 socket.io-client
// 建立连接
// const ws = io('http://192.168.15.54:3000/')
// // 监听连接成功
// ws.on('connect', () => {
//   console.log('连接成功')
// })
// // 连接失败
// ws.on('error', () => {
//   console.log('连接失败')
// })
// // 发送消息
// // ws.emit('消息类型')
// ws.emit('chat message', 'hello 你好')

// // 接收消息
// // ws.on('消息类型',()=>{})
// ws.on('chat message', (e) => {
//   console.log(e)
// })
// ws.on('disconnect', () => {
//   console.log('断开了')
// })
// const close = () => {
//   ws.close()
// }
  </script>
</body>
</html>